<!doctype html>

<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="css/stylesheet.css" />
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=a72a8ca78008524d162e8fe2cc2d84b1"></script>
    <script type="text/javascript" src="js/toolbar.js"></script>
    <script type="text/javascript" src="js/qwebchannel.js"></script>

    <style>
        img {
            width: 64px;
            height: 64px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -32px;
            margin-top:-32px;
            z-index: 1;
        }

        .containercss{
            position: relative;
            width:800px;
            height:600px;
        }
        .ms{position: absolute; bottom: 0;left: 0; width: 240px; height: 25px; background: #000;}
    </style>
</head>
<body>

    <div class="containercss" id="container">
        <img id="planeimg" src="pics/plane.png">
        <span class="ms"></span>
    </div>
    <script type="text/javascript">
        // 加载地图并显示图标
        // 定义初始位置
        var longitude = 119.981432;
        var latitude = 30.366014;
        // 加载地图
        var map = new AMap.Map("container", {
            resizeEnable: true,		//可缩放
            zoom: 11,				//初始化地图层级
            center: [longitude, latitude]		//初始化地图中心点
        });
        

        // 设置地图图标和中心的位置
        function SetMapCenter(long2, latit2) {
            
            // 传入经纬度，设置地图中心点
            var position = new AMap.LngLat(long2, latit2);  // 标准写法
            // 简写 var position = [116, 39];
            map.setCenter(position);
        }
    </script>
    <script>
        // 响应地图移动事件
        var myTimer=null;
        function MoveToEastCity() {
            if (myTimer != null) return;
            // 设置一个定时器
            myTimer = window.setInterval(function () {
                longitude += 0.001;
                SetMapCenter(longitude, latitude);
            }, 100);
        }
        // 停止移动地图
        function StopMoveToEastCity() {
            clearTimeout(myTimer);
            myTimer = null;
        }
    </script>
    <script>
       // 响应飞机移动事件
       var myTimerMovePlane = null;
       function PlaneMoveToEastCity() {
           if (myTimerMovePlane != null) return;
           // 设置一个定时器
           var plane = document.getElementById('planeimg');//获取图片
           var step = 1;//步长
           var pleft = parseInt(plane.offsetLeft) + 32;   //图片距离左边的长度

           myTimerMovePlane = window.setInterval(function () {
               pleft = pleft + step;         //图片移动
               plane.style.left = pleft + 'px'; //赋值新距离
           }, 100);
       }
       // 停止移动地图
       function PlaneStopMoveToEastCity() {
           clearTimeout(myTimerMovePlane);
           myTimerMovePlane = null;
       }
   </script>
</body>
</html>
